import React, { useState, useEffect } from "react";
import ReactECharts from "echarts-for-react";
import axios from "axios";
import "../mock/Echarts/data1";

// 在此组件中绘制一个简单的折线图
const Echart1 = () => {
  useEffect(() => {
    axios.get("/echart1", { dataType: "json" }).then((res) => {
      let op = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        toolbox: {
          feature: {
            dataView: { show: false, readOnly: false },
            magicType: { show: false, type: ["line", "bar"] },
            restore: { show: false },
            saveAsImage: { show: false },
          },
        },
        legend: {
          data: res.data.data.legend.data,
          bottom: 10,
          itemWidth: 8,
          itemHeight: 4,
          textStyle: {
            color: "#fff",
          },
        },
        xAxis: [
          {
            type: "category",
            axisLine: {
              lineStyle: {
                color: "#B9B8CE",
              },
            },
            data: res.data.data.xAxis.data,
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            min: 0,
            max: 60,
            interval: 10,
            name: "",
            axisLabel: {
              formatter: "{value}",
            },
            axisLine: {
              lineStyle: {
                color: "#B9B8CE",
              },
              show: false, //y轴
            },
            axisTick: {
              show: false, //y轴刻度线
            },
            splitLine: {
              show: false, //网格线
            },
          },
          {
            type: "value",
            min: 0,
            max: 4,
            interval: 1,
            name: "",
            axisLabel: {
              formatter: "{value} %",
            },
            axisLine: {
              lineStyle: {
                color: "#B9B8CE",
              },
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: res.data.data.series[0].name,
            type: "bar",
            tooltip: {
              valueFormatter: function (value) {
                return value;
              },
            },
            data: res.data.data.series[0].data,
          },
          {
            name: res.data.data.series[1].name,
            type: "line",
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value;
              },
            },
            data: res.data.data.series[1].data,
          },
          {
            name: res.data.data.series[2].name,
            type: "line",
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value;
              },
            },
            data: res.data.data.series[2].data,
          },
        ],
      };
      setOption(op);
    });
  }, []);

  const [option, setOption] = useState({});

  // 返回折线图的配置对象
  // let option1 = {
  //   tooltip: {
  //     trigger: "axis",
  //     axisPointer: {
  //       type: "cross",
  //       crossStyle: {
  //         color: "#999",
  //       },
  //     },
  //   },
  //   toolbox: {
  //     feature: {
  //       dataView: { show: false, readOnly: false },
  //       magicType: { show: false, type: ["line", "bar"] },
  //       restore: { show: false },
  //       saveAsImage: { show: false },
  //     },
  //   },
  //   legend: {
  //     data: ["团队", "环比", "同比"],
  //     bottom: 10,
  //     itemWidth: 8,
  //     itemHeight: 4,
  //     textStyle: {
  //       color: "#fff",
  //     },
  //   },
  //   xAxis: [
  //     {
  //       type: "category",
  //       axisLine: {
  //         lineStyle: {
  //           color: "#B9B8CE",
  //         },
  //       },
  //       data: [
  //         "1月1日",
  //         "1月2日",
  //         "1月3日",
  //         "1月4日",
  //         "1月5日",
  //         "1月6日",
  //         "1月7日",
  //       ],
  //       axisPointer: {
  //         type: "shadow",
  //       },
  //     },
  //   ],
  //   yAxis: [
  //     {
  //       type: "value",
  //       min: 0,
  //       max: 60,
  //       interval: 10,
  //       name: "",
  //       axisLabel: {
  //         formatter: "{value}",
  //       },
  //       axisLine: {
  //         lineStyle: {
  //           color: "#B9B8CE",
  //         },
  //         show: false, //y轴
  //       },
  //       axisTick: {
  //         show: false, //y轴刻度线
  //       },
  //       splitLine: {
  //         show: false, //网格线
  //       },
  //     },
  //     {
  //       type: "value",
  //       min: 0,
  //       max: 4,
  //       interval: 1,
  //       name: "",
  //       axisLabel: {
  //         formatter: "{value} %",
  //       },
  //       axisLine: {
  //         lineStyle: {
  //           color: "#B9B8CE",
  //         },
  //         show: false,
  //       },
  //       axisTick: {
  //         show: false,
  //       },
  //       splitLine: {
  //         show: false,
  //       },
  //     },
  //   ],
  //   series: [
  //     {
  //       name: "团队",
  //       type: "bar",
  //       tooltip: {
  //         valueFormatter: function (value) {
  //           return value;
  //         },
  //       },
  //       data: [60.0, 51.1, 42.3, 33.4, 25.6, 16, 15.5],
  //     },
  //     {
  //       name: "环比",
  //       type: "line",
  //       yAxisIndex: 1,
  //       tooltip: {
  //         valueFormatter: function (value) {
  //           return value;
  //         },
  //       },
  //       data: [1.5, 0.8, 1.4, 1, 0.4, 0.7, 0.8],
  //     },
  //     {
  //       name: "同比",
  //       type: "line",
  //       yAxisIndex: 1,
  //       tooltip: {
  //         valueFormatter: function (value) {
  //           return value;
  //         },
  //       },
  //       data: [1.3, 0.7, 0.9, 0.8, 2.9, 2, 3.7],
  //     },
  //   ],
  // };

  return (
    <div>
      <ReactECharts option={option} />
    </div>
  );
};

export default Echart1;
